<template>
    <div>
        <template v-for="item in menu">
            <!-- 递归渲染 -->
            <el-submenu v-if="item.type===0" :index="''+item.menuId" :key="item.menuId">
                <!-- index必须是字符串-->
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span :class="collapse?'hide-text':''" slot="title">{{item.name}}</span>
                </template>
                <sidebar-item :menu="item.list"></sidebar-item>
            </el-submenu>
            <el-menu-item v-else :index="item.url" :key="item.menuId">
                <i :class="item.icon"></i> {{item.name}}
            </el-menu-item>
        </template>
    </div>
</template>
<script>
export default {
  name: 'SidebarItem',
  props: {
    menu: {
      type: Array
    },
    collapse: {
      type: Boolean
    }
  }
}
</script>
<style scoped>
.hide-text {
  visibility: hidden;
  display: inline-block;
  height: 0px;
  width: 0px;
  overflow: hidden;
}
</style>

